<template>
	<view class="page">
		<navigation class="header_navigation" textColor="#333333" barColor="#333333" defaultButton="back">企业认证</navigation>
		<view class="page_scroll">
			<view class="page_main">
				<form-input name="公司名称" v-model="model.name" placeholder="请输入公司名称"></form-input>
				<form-input name="法人姓名" v-model="model.corpName" placeholder="请输入法人姓名"></form-input>
				<form-input type="number" name="法人身份证号" v-model="model.corpId" placeholder="请输入法人身份证号"></form-input>
				<view class="title">请上传营业执照</view>
				<view class="cu-form-group photo_panel">
					<view class="grid grid-square">
						<view class="bg-img" v-for="(item, index) in model.companyImg" :key="index" @tap="companyImgViewImage" :data-url="model.companyImg[index]">
							<image class="form-item__value-image" :src="model.companyImg[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="companyImgDelImg" :data-index="index"><text class="cuIcon-close"></text></view>
						</view>
						<view class="solids" @tap="companyImgChooseImage" v-if="model.companyImg.length < 1">
							<!-- <text class='cuIcon-cameraadd'></text> -->
							<image class="form-item__value-image" src="/static/images/certification01.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="title bottom_title">请上传法人身份证</view>
				<view class="item">
					<view class="cu-form-group photo_panel">
						<view class="grid grid-square">
							<view class="bg-img" v-for="(item, index) in model.picCorpZheng" :key="index" @tap="picCorpZhengViewImage" :data-url="model.picCorpZheng[index]">
								<image class="form-item__value-image" :src="model.picCorpZheng[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="picCorpZhengDelImg" :data-index="index"><text class="cuIcon-close"></text></view>
							</view>
							<view class="solids" @tap="picCorpZhengChooseImage" v-if="model.picCorpZheng.length < 1">
								<!-- <text class='cuIcon-cameraadd'></text> -->
								<image class="form-item__value-image" src="/static/images/certification02.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="cu-form-group photo_panel">
						<view class="grid grid-square">
							<view class="bg-img" v-for="(item, index) in model.picCorpFan" :key="index" @tap="picCorpFanViewImage" :data-url="model.picCorpFan[index]">
								<image class="form-item__value-image" :src="model.picCorpFan[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="picCorpFanDelImg" :data-index="index"><text class="cuIcon-close"></text></view>
							</view>
							<view class="solids" @tap="picCorpFanChooseImage" v-if="model.picCorpFan.length < 1">
								<!-- <text class='cuIcon-cameraadd'></text> -->
								<image class="form-item__value-image" src="/static/images/certification03.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="hint_text">证件必须是清晰彩色原件电子版本。可以是扫描件或者数码拍摄照片。支持jpg 、png、jpeg的图片格式</view>

				<button class="page_btn" hover-class="page_btn-hover" @tap="submit">确认提交</button>
			</view>
		</view>
	</view>
</template>

<script>
import * as orgApi from '@/api/orgApi/org.js';
import { HTTP_SERVER_URL } from '@/config';
export default {
	data() {
		return {
			HTTP_SERVER_URL,
			userInfo: this.$store.getters.getUserInfo,
			model: {
				name: '',
				corpName: '',
				corpId: '',
				companyImg: [],
				picCorpZheng: [],
				picCorpFan: [],
				instituteType: 1,//注册类型 0-进入已有公司 1-申请新服务商
			}
		};
	},
	methods: {
		submit() {
			let model = JSON.parse(JSON.stringify(this.model));
			model.companyImg = model.companyImg[0];
			model.picCorpZheng = model.picCorpZheng[0];
			model.picCorpFan = model.picCorpFan[0];
			model.openId = this.userInfo.openId || '';
			model.phone = this.userInfo.phone || '';
			model.wxAvatar = this.userInfo.wxAvatar || '';
			model.wxNickname = this.userInfo.wxNickname || '';
			orgApi
				.newOrg(model)
				.then(res => {
					if (res.code === 0) {
						uni.reLaunch({
							url: '/pages/system/getPhoneNumber'
						});
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		//选择图片
		companyImgChooseImage() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				// sourceType: ['camera'], //从相册选择
				success: res => {
					let url = '/institute/service-image/addImage';
					// #ifdef APP-PLUS || MP-WEIXIN
					url = HTTP_SERVER_URL + url;
					// #endif
					uni.uploadFile({
						url,
						filePath: res.tempFilePaths[0],
						name: 'file',
						success: uploadRes => {
							this.model.companyImg.push(JSON.parse(uploadRes.data).data);
						},
						fail: uploadErr => {
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				}
			});
		},
		//预览图片
		companyImgViewImage(e) {
			uni.previewImage({
				urls: this.model.companyImg,
				current: e.currentTarget.dataset.url
			});
		},
		//删除图片
		companyImgDelImg(e) {
			uni.showModal({
				title: '删除照片',
				content: '确定要删除这张照片吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.model.companyImg.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},

		//选择图片
		picCorpZhengChooseImage() {
			let self = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //从相册选择
				success: res => {
					let url = '/institute/service-image/addImage';
					// #ifdef APP-PLUS || MP-WEIXIN
					url = HTTP_SERVER_URL + url;
					// #endif
					uni.uploadFile({
						url,
						filePath: res.tempFilePaths[0],
						name: 'file',
						success: uploadRes => {
							this.model.picCorpZheng.push(JSON.parse(uploadRes.data).data);
						},
						fail: uploadErr => {
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
					// for (var i = 0; i<res.tempFilePaths.length; i++) {
					// 	let url = '/institute/service-image/addImage';
					// 	// #ifdef APP-PLUS || MP-WEIXIN
					// 	url = HTTP_SERVER_URL + url;
					// 	// #endif
					// 	uni.uploadFile({
					// 		url,
					// 		filePath: res.tempFilePaths[i],
					// 		name: 'file',
					// 		success: uploadRes => {
					// 			this.model.picCorpZheng.push(JSON.parse(uploadRes.data).data);
					// 		},
					// 		fail: uploadErr => {
					// 			uni.showToast({
					// 				title: '上传失败',
					// 				icon: 'none',
					// 				duration: 2000
					// 			});
					// 		}
					// 	});
					// }
				}
			});
		},
		//预览图片
		picCorpZhengViewImage(e) {
			uni.previewImage({
				urls: this.model.picCorpZheng,
				current: e.currentTarget.dataset.url
			});
		},
		//删除图片
		picCorpZhengDelImg(e) {
			uni.showModal({
				title: '删除照片',
				content: '确定要删除这张照片吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.model.picCorpZheng.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},

		//选择图片
		picCorpFanChooseImage() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //从相册选择
				success: res => {
					let url = '/institute/service-image/addImage';
					// #ifdef APP-PLUS || MP-WEIXIN
					url = HTTP_SERVER_URL + url;
					// #endif
					uni.uploadFile({
						url,
						filePath: res.tempFilePaths[0],
						name: 'file',
						success: uploadRes => {
							this.model.picCorpFan.push(JSON.parse(uploadRes.data).data);
						},
						fail: uploadErr => {
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				}
			});
		},
		//预览图片
		picCorpFanViewImage(e) {
			uni.previewImage({
				urls: this.model.picCorpFan,
				current: e.currentTarget.dataset.url
			});
		},
		//删除图片
		picCorpFanDelImg(e) {
			uni.showModal({
				title: '删除照片',
				content: '确定要删除这张照片吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.model.picCorpFan.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		}
	}
};
</script>

<style lang="stylus">
.page_scroll
	position absolute
	top calc(120rpx + var(--status-bar-height))
	right 0
	bottom 0
	left 0
	.page_main
		padding 0rpx 30rpx
		box-sizing border-box
.form-item__value-image
	width 100%
	height 340rpx
.title, .form-item__name
	font-size 30rpx !important
	font-family PingFang !important
	font-weight bold !important
	color #666666 !important
	margin-bottom 20rpx
	margin-top 30rpx
.form-item__name
	margin-bottom 0rpx
.bottom_title
	margin-top 70rpx
.hint_text
	margin-top 30rpx
	font-size 20rpx
	font-family PingFang
	font-weight 400
	color #999999
.cu-form-group
	padding 0rpx
	.grid
		width 100%
		height 340rpx
	.bg-img, .solids
		margin 0rpx
		width 100%
		height 340rpx
.item
	display flex
	justify-content space-between
	.cu-form-group
		width 50%
		padding 0rpx
		&:nth-of-type(2)
			margin-left 30rpx
		.grid, .form-item__value-image
			width 100%
			height 260rpx
		.bg-img, .solids
			margin 0rpx
			width 100%
			height 260rpx
.page_btn
	margin-top 70rpx
</style>
